<!-- 基础抽屉组件 -->

<!-- 属性 -->
<!-- 配置名称 | 类型 | 用途 | 返回值 | 默认值 | 必填 | 说明 -->
<!-- v-model | Boolean | 控制抽屉显示隐藏 | - | false | - | 无 -->

<!-- 事件 -->
<!-- 无 -->

<!-- 插槽 -->
<!--
  #title: 弹窗标题
  #default: 弹窗内容
-->

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
  width?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  width: '50%'
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
}>()

const visiable = ref(false)

watch(
  () => props.modelValue,
  (newVal) => {
    visiable.value = newVal
  },
  {
    immediate: true
  }
)

watch(visiable, (newVal) => {
  if (!newVal) {
    emit('update:modelValue', false)
  }
})
</script>

<template>
  <el-drawer
    v-model="visiable"
    class="base-drawer-wrapper"
    :size="props.width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <div class="base-drawer-header">
        <div class="base-drawer-header-title">
          <slot name="title"></slot>
        </div>
        <div class="base-drawer-header-toolbar">
          <slot name="toolbar"></slot>
        </div>
      </div>
    </template>
    <slot></slot>

    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.base-drawer-wrapper {
  .el-drawer__header {
    margin-bottom: 0;
    padding-bottom: var(--el-drawer-padding-primary);
    border-bottom: 1px solid rgba(220, 223, 230, 1);
    .base-drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .base-drawer-header-title {
        font-family: 'PingFangSC-Bold';
        font-size: 18px;
        font-weight: bold;
        color: var(--black-color);
        line-height: 21px;
      }
      .base-drawer-header-toolbar {
        margin-right: 20px;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 6px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 500px;
    background-color: rgba(144, 147, 153, 0.3);
    transition: background-color 0.3s;
  }
  ::-webkit-scrollbar-thumb:window-inactive {
    cursor: pointer;
    border-radius: 500px;
    background-color: rgba(144, 147, 153, 0.3);
    transition: background-color 0.3s;
  }
}
</style>
